<template>
  <view class="select-dialog" v-if="displayOptions.length">
    <view class="search-head-form">
      <view :class="displayOptions.length > 1 ? 'key' : 'key1'">
        <template v-if="!searchStatus">
          <!-- 特殊查询 -->
          <view
            v-if="useSpecialSearch"
            class="iconfont special-search icon-xiaopiaoteshuxinxichaxun"
            :class="[specialSearchFlag ? 'active-special-search' : '']"
            @tap="specialSearch"
          />
          <view v-if="multiple" class="ml10">
            <slot name="multiple"></slot>
          </view>
          <!-- 显示在外层查询框 -->
          <uni-easyinput
            v-if="!customFirst"
            v-model="searchForm.form[firstParams.prop]"
            class="search-input"
            :class="[multiple ? 'multiple-search-input' : '']"
            :input-border="false"
            :placeholder="firstParams.placeholder"
            @input="firstParams.item?.inputMethod"
            v-bind="firstParams.attrs"
            @clear="search()"
            @confirm="search()"
            @focus="getFocus"
          />
          <template v-else>
            <slot name="customFirst"></slot>
          </template>

          <view class="m-r-5 iconfont icon-chaxun" @tap="search()" />
        </template>
      </view>

      <!-- 更多 -->
      <view class="more" @tap="searchStatus = !searchStatus" v-if="displayOptions.length > 1">
        <view class="" />
        <u-icon :name="searchStatus ? 'arrow-up' : 'arrow-down'" size="14px" :color="globalTheme.basicColor.primary" />
      </view>
    </view>

    <slot name="searchCustom"> </slot>
    <view v-if="quickSearch" class="search-focus-key">
      <view class="title">关键字</view>
      <view class="key-box">
        <view v-for="item of quickSearchData" :key="item" @tap="quickSearchClick(item)">
          {{ item }}
        </view>
      </view>
    </view>
    <view v-show="searchStatus" class="search-form-box">
      <ProForm label-width="100px" :options="options" @get-model="init" @submit="search" />
      <view class="btn">
        <view>
          <u-button class="reset" @tap="reset()">
            <view class="iconfont mr5 icon-reset" />
            重置
          </u-button>
        </view>
        <view>
          <u-button class="search" @tap="search()">
            <view class="iconfont mr5 icon-chaxun" />
            查询
          </u-button>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { searchFromOptionsProp } from "./interface/index";
const globalTheme = useThemeStore();
export interface ProTableProps {
  customFirst?: boolean; // 是否自定义第一项查询
  useSpecialSearch?: boolean; // 是否使用特殊查询标识
  options?: searchFromOptionsProp[]; // 查询表单属性
  quickSearchData?: Array<string | number>; // 快速检索项内容
  multiple?: boolean; // 表格是否有更多选择
}

// 接受父组件参数，配置默认值
const props = withDefaults(defineProps<ProTableProps>(), {
  customFirst: false,
  useSpecialSearch: false,
  multiple: false,
  options: () => [],
  quickSearchData: () => []
});

const $emit = defineEmits(["getFormModel", "searchRefresh", "searchReset"]);

// 使用特殊查询
let specialSearchFlag = ref(false);
// 快速查询项是否显示
let quickSearch = ref(false);
// 外层参数
let firstParams = reactive({
  placeholder: "",
  prop: "",
  attrs: {},
  item: {
    inputMethod: () => null
  }
});
// 是否打开更多查询
let searchStatus = ref(false);

let displayOptions = computed(() => props.options.filter(item => !item.hide));

// 查询表单
const searchForm = ref({
  // 属性
  options: [],
  // 绑定内容
  form: {}
});
// 特殊查询
const specialSearch = () => {
  console.log("特殊查询");
};

/**
 * @description 快速查询点击
 * @param  key
 */
const quickSearchClick = (key: string | number) => {
  searchForm.value.form[firstParams.prop] = key;
  quickSearch.value = false;
  search();
};

// 获取焦点
const getFocus = () => {
  if (!props.quickSearchData?.length) return;
  quickSearch.value = true;
};

const search = () => {
  searchStatus.value = false;
  $emit("searchRefresh");
};
const reset = () => {
  searchStatus.value = false;
  $emit("searchReset");
};

const init = form => {
  searchForm.value.form = form;
  $emit("getFormModel", form);
  for (const item of props.options) {
    const { first, prop, label, attrs } = item;
    const { placeholder } = attrs || {};

    if (first) {
      Object.assign(firstParams, {
        prop,
        placeholder: placeholder || `请输入${label}`,
        attrs,
        item
      });
    }
  }
};
</script>
<style lang="scss" scoped src="./index.scss"></style>
